/**
* 系统管理 用户管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableMain" style="margin-top: 20px">
      <div class="form">
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" ref="formInline1">
          <el-form-item label="搜索: ">
            <el-select size="small" v-model="formInline.status" placeholder="请选择">
              <el-option label="全部" value=""/>
              <el-option label="进行中" value="1"/>
              <el-option label="已禁用" value="0"/>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名: ">
            <el-input size="small" v-model="formInline.nickName" placeholder="输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="性别: ">
            <el-select size="small" v-model="formInline.sex" placeholder="输入性别">
              <el-option label="♂" value="1" align="center"/>
              <el-option label="♀" value="0" align="center"/>
            </el-select>
          </el-form-item>
          <el-form-item label="电话: ">
            <el-input size="small" v-model="formInline.phone" placeholder="输入手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="search('formInline1')">搜索</el-button>
            <el-button type="success" plain @click="handleSave()">添加</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--列表-->
      <el-table
        :data="userData"
        highlight-current-row
        v-loading="loading"
        border element-loading-text="拼命加载中"
        :header-cell-style="{'text-align':'center'}"
        style="width: 100%;">
        <el-table-column label="序号" prop="id" align="center" width="80">
        </el-table-column>
        <el-table-column label="用户名" prop="nickName" align="center">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>用户名: {{ scope.row.nickName }}</div>
              </template>
              <template #reference>
                <el-tag>{{ scope.row.nickName }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="头像" prop="avatar" align="center">
          <template slot-scope="scope">
            <el-image style="width: 30px; height: 30px" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" prop="name" align="center">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>真实姓名: {{ scope.row.name }}</div>
              </template>
              <template #reference>
                <el-tag type="success" plain>{{ scope.row.name }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" align="center" width="80">
          <template #default="scope">
            <div v-if="scope.row.sex == 1">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>
                    性别:<i class="el-icon-male"/>男
                  </div>
                </template>
                <template #reference>
                  <el-tag type="primary" plain><i class="el-icon-male"/>男</el-tag>
                </template>
              </el-popover>
            </div>
            <div v-else>
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>
                    性别:<i class="el-icon-female"/>女
                  </div>
                </template>
                <template #reference>
                  <el-tag type="danger" plain><i class="el-icon-female"/>女</el-tag>
                </template>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="电话" prop="phone" align="center">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>电话:<i class="el-icon-phone"/> {{ scope.row.phone }}</div>
              </template>
              <template #reference>
                <el-tag type="warning" plain><i class="el-icon-phone-outline"/>{{ scope.row.phone }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="现居地" prop="province" align="center">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top" width="auto">
              <template #default>
                <div>现居地:<i class="el-icon-location"/> {{ scope.row.province }}</div>
              </template>
              <template #reference>
                <el-tag type="info" plain><i class="el-icon-location-outline"/>{{ scope.row.province }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status==1"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="类型" prop="type" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.type == 0" type="primary" plain><span>普通</span></el-tag>
            <el-tag v-if="scope.row.type == 1" type="success" plain><span>中级</span></el-tag>
            <el-tag v-if="scope.row.type == 2" type="warning" plain><span>高级</span></el-tag>
            <el-tag v-if="scope.row.type == 3" type="danger" plain><span>至上</span></el-tag>
            <el-tag v-if="scope.row.type == 4" class="purple"><span>尊贵</span></el-tag>
            <el-tag v-if="scope.row.type == 5" type="info" plain><span>黑卡</span></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" align="center" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">Edit
            </el-button>
            <el-button size="small" type="danger" plain @click="handleDelete(scope.$index, scope.row)">Delete
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          @current-change="closeDialog"
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          layout="total, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title=title :visible.sync="dialogFormVisible" :show-close=close>
      <el-form :model="userDataForm" ref="userData">
        <el-form-item label="用户名:" label-width="100px">
          <el-input v-model="userDataForm.nickName" autocomplete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="头像:" prop="avatar" label-width="100px">
          <el-input v-model="userDataForm.avatar" autocomplete="off" placeholder="请输入图片url地址"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名:" label-width="100px">
          <el-input v-model="userDataForm.name" autocomplete="off" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别:" label-width="100px">
          <el-select v-model="userDataForm.sex" placeholder="请输入性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话:" label-width="100px">
          <el-input v-model="userDataForm.phone" autocomplete="off" placeholder="请输入电话号码"></el-input>
        </el-form-item>
        <el-form-item label="现居地:" label-width="100px">
          <el-input v-model="userDataForm.province" autocomplete="off" placeholder="现居地"></el-input>
        </el-form-item>
        <el-form-item label="状态:" label-width="100px">
          <el-switch v-model="userDataForm.status"></el-switch>
        </el-form-item>
        <el-form-item label="类型:" label-width="100px">
          <el-select v-model="userDataForm.type" placeholder="请选择类型级别">
            <el-option label="普通蓝" value="0"></el-option>
            <el-option label="中级绿" value="1"></el-option>
            <el-option label="高级黄" value="2"></el-option>
            <el-option label="至上红" value="3"></el-option>
            <el-option label="尊贵紫" value="4"></el-option>
            <el-option label="黑曜卡" value="5"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog(pagination.currentPage)">取 消</el-button>
        <el-button type="primary" @click="edit('userData')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userApi from "@/api/user"

export default {
  data() {
    return {
      BASE_API: 'http://localhost:8080',
      //是显示加载
      loading: true,
      close: false,
      // 请求数据参数
      formInline: {
        status: '',
        nickName: '',
        sex: '',
        userMobile: '',
        phone: ''
      },
      dialogFormVisible: false,
      title: '添加用户信息',
      //用户数据
      userData: [],
      userDataForm: {},
      // 分页参数
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0//总记录数
      },
    }
  },
  created() {
    this.getData(this.pagination.currentPage, this.pagination.pageSize, this.userData)
  },

  methods: {
    //获取用户列表
    getData(currentPage) {
      userApi.getPageUserLike(currentPage, this.pagination.pageSize, this.formInline).then(req => {
        console.log(req)
        this.userData = req.data.records
        this.pagination.currentPage = req.data.current
        this.pagination.pageSize = req.data.size
        this.pagination.total = req.data.total
        this.loading = false;
      })
    },
    search(formInline1) {
      this.$refs[formInline1].validate((valid) => {
        if (valid) {
          userApi.getPageUserLike(this.pagination.currentPage, this.pagination.pageSize, this.formInline).then(req => {
            console.log(req);
            if (req.data.records.length === 0) {
              this.$message.error("未查到相关数据")
            } else {
              this.userData = req.data.records
              this.pagination.currentPage = req.data.current
              this.pagination.pageSize = req.data.size
              this.pagination.total = req.data.total
              this.loading = false
            }
          })
        } else {
          this.$message.error("数据校验失败")
          return false;
        }
      });
    },
    handleSave() {
      this.title = "添加用户信息"
      this.openDialog()
    },
    handleEdit(index, row) {
      this.userDataForm = row;
      console.log(row);
      if (row.sex == 1) {
        this.userDataForm.sex = '男';
      } else {
        this.userDataForm.sex = '女';
      }
      if (row.status == 1) {
        this.userDataForm.status = true;
      } else {
        this.userDataForm.status = false;
      }
      if (row.type == 0) {
        this.userDataForm.type = "普通蓝"
      } else if (row.type == 1) {
        this.userDataForm.type = "中级绿"
      } else if (row.type == 2) {
        this.userDataForm.type = "高级黄"
      } else if (row.type == 3) {
        this.userDataForm.type = "至上红"
      } else if (row.type == 4) {
        this.userDataForm.type = "尊贵紫"
      } else {
        this.userDataForm.type = "黑曜卡"
      }
      this.title = '编辑用户信息'
      this.openDialog()
    },
    edit() {
      if (this.userDataForm.sex == '男') {
        this.userDataForm.sex = 1;
      } else {
        this.userDataForm.sex = 0;
      }
      if (this.userDataForm.status == true) {
        this.userDataForm.status = 1;
      } else {
        this.userDataForm.status = 0
      }
      if (this.userDataForm.type == "普通蓝") {
        this.userDataForm.type = 0
      } else if (this.userDataForm.type == "中级绿") {
        this.userDataForm.type = 1
      } else if (this.userDataForm.type == "高级黄") {
        this.userDataForm.type = 2
      } else if (this.userDataForm.type == "至上红") {
        this.userDataForm.type = 3
      } else if (this.userDataForm.type == "尊贵紫") {
        this.userDataForm.type = 4
      } else {
        this.userDataForm.type = 5
      }
      if (this.title == "添加用户信息") {
        userApi.save(this.userDataForm)
      } else if (this.title = "编辑用户信息") {
        console.log(this.userDataForm)
        userApi.updateById(this.userDataForm)
      }
      this.closeDialog(this.pagination.currentPage)
    },
    handleDelete() {
      this.$confirm("此操作删除当前数据，是否继续？", "提示", {
        type: 'info'
      }).then(() => {
        userApi.deleteById(row.id)
      }).catch(() => {
        this.$message.info("取消删除操作");
      }).finally(() => {
        this.closeDialog(this.pagination.currentPage)
      })
    },
    closeDialog(currentPage) {
      this.getData(currentPage, this.pagination.pageSize, this.formInline)
      this.dialogFormVisible = false
      this.form = {}
    },
    openDialog() {
      this.dialogFormVisible = true
    }
  }
}
</script>
<style>
.purple {
  color: #F168F1;
  background-color: #FBC0FB;
}
</style>
